<script setup lang="ts">
import { get_BiyeFlow } from '@/request';
import * as echarts from 'echarts';
import { onMounted } from 'vue';
var option = {
    //提示框
    tooltip: {
        trigger: 'axis',
        showDelay: 0,
        extraCssText: 'padding:15px;font-size:10px',
        axisPointer: {
            show: true,
            type: 'shadow',
        }
    },
    grid: {
        left: '4%',
        right: '10%',
        top: '3%',
        bottom: '13%',
        containLabel: true
    },
    yAxis: [{
        type: 'category',
        data: [
            '上海', '天津', '重庆', '广东', '广西',
            '浙江', '江苏', '湖北'
        ],
        axisLine: {
            show: false,
            lineStyle: {
                color: '#FFFFFF'
            }
        },
        splitLine: {
            show: false // 取消Y轴的网格线  
        },
        axisTick: {
            show: false
        },
    }],
    xAxis: [{
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }

    }, {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    }],
    series: [
        {
            name: '配属',
            type: 'bar',
            color: '#a3a7f4',
            xAxisIndex: 0,
            barWidth: 4,
            itemStyle: {
                emphasis: {
                    barBorderRadius: 4
                },
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#A520FF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#FF007A' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [0, 4, 4, 0]
                }
            },
            data: [409, 887, 948, 611, 327, 355, 560, 498, 569]
        },
        {
            name: '运用',
            type: 'bar',
            // color: '#a476f5',
            xAxisIndex: 1,
            barWidth: 4,
            itemStyle: {
                emphasis: {
                    barBorderRadius: 4
                },
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#00A2FF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#00CCD2' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [0, 4, 4, 0]
                }
            },
            data: [844, 780, 284, 65, 51, 659, 50, 183, 542],
        },
        {
            name: '厂段修',
            type: 'bar',
            // color: '#f00',
            xAxisIndex: 1,
            barWidth: 4,
            itemStyle: {
                emphasis: {
                    barBorderRadius: 4
                },
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#6A6660' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#FFC400' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [0, 3, 3, 0]
                }
            },
            data: [44, 78, 28, 16, 15, 65, 10, 13, 52],
        },
    ]
};
onMounted(() => {
    var chartDom = document.getElementById('Biyeflow');
    var myChart = echarts.init(chartDom);
    get_BiyeFlow().then(resp => {
        console.log('近三年来毕业人员去向', resp)
        option.yAxis.data = [...new Set(resp.data.data.result.map(item => item.workCity))]
        let year = [...new Set(resp.data.data.result.map(item => item.gradYear))]
        let seriesData = year.map((item,index) => {
            return {
                name: item,
                type: 'bar',
                data: resp.data.data.result.filter(obj => obj.gradYear === item).map(obj => obj.total),
                color: '#a3a7f4',
                xAxisIndex: 0,
                barWidth: 4,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: 4
                    },
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                                { offset: 0, color: index % 2 === 0 ? '#A520FF' : '#00CCD2' }, // Alternating colors for demonstration
                                { offset: 1, color: index % 2 === 0 ? '#FF007A' : '#00CCD2' }
                            ],
                            false
                        ),
                        barBorderRadius: [0, 4, 4, 0]
                    }
                },
            }
        })
        option.series = seriesData
        myChart.setOption(option)
         window.addEventListener('resize', function () {
            myChart.resize();
        });
    })

})

</script>

<template>
    <div id="Biyeflow">

    </div>
</template>

<style scoped lang="scss">
#Biyeflow {
    width: 100%;
    height: 34vh;
    // border: #fcc solid 1px;
}
</style>
